<template>
    <nut-button>nut-button</nut-button>

    <nut-space direction="vertical" fill :gutter="40">
        <p class="title">课程资源与评价平台</p>
        <nut-space direction="vertical" fill :gutter="10">
            <nut-input v-model="mobile" placeholder="请输入手机号" />
            <nut-input v-model="code" placeholder="请输入验证码">
                <template #right>
                    <nut-button plain type="info" @click="clickSMS">获取验证码</nut-button>
                </template>
            </nut-input>
        </nut-space>
        <nut-row type="flex" justify="center">
            <nut-col :span="22">
                <nut-button block type="info" @click="clickLogin">登录</nut-button>
            </nut-col>
        </nut-row>
    </nut-space>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getSMS, login } from '@/service/api/auth';
import { useAuthStore } from '@/stores';
import { useRouterPush } from '@/composables';
const mobile = ref("")
const code = ref("")
const auth = useAuthStore()

async function clickSMS() {
    if (mobile.value != "") {
        const res = await getSMS(mobile.value)
        console.log(res);
    }
}

async function clickLogin() {
    if (mobile.value != "" && code.value != "") {
        const res = await login(mobile.value, code.value)
        if (res.success !== undefined) {
            auth.setToken(res.success.token)
            auth.setUserInfo(res.success.user)
            const { toHome } = useRouterPush()
            toHome()
        }
    }
}

</script>

<style>
.title {
    font-size: 40px;
    width: 100%;
    text-align: center;
    margin: auto;
    color: rgb(43, 43, 218);
    margin-top: 300px;
}
</style>

<!-- <style>
.content {
    line-height: 40px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    background: #ff8881;
    margin-bottom: 10px;
}

.light {
    background: #ffc7c4;
}
</style> -->
